<template>
  <view class="progressBar">
    <view
      class="box"
      :style="{
        width: width + '%',
      }"
    >
      <image
        class="icon"
        :src="asyncImgs.index.cut_price_ico"
        mode="widthFix"
      />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      default: 0,
    },
  },
};
</script>

<style lang="less" scoped>
.progressBar {
  position: relative;
  height: 24rpx;
  background: #ffe5e2;
  border-radius: 14rpx;

  .box {
    position: relative;
    height: 100%;
    background: linear-gradient(90deg, #f1280f 0%, #ff7031 100%);
    border-radius: 14rpx;

    .icon {
      position: absolute;
      right: -25rpx;
      top: -7rpx;
      width: 36rpx;
      height: 36rpx;
      border-radius: 32px;
    }
  }
}
</style>
